import {Layout, Menu, Avatar, Dropdown, Space} from 'antd';
import 'antd/dist/antd.css';
import {useState} from "react";
import { history } from 'umi';
import {
  HomeOutlined,
  ScheduleOutlined,
  SettingOutlined,
  FileTextOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';

// 引入组件
import HomePage from '@/pages/home';
import Tasks from '@/pages/tasks';
import Executors from '@/pages/executors';
import JobLogs from '@/pages/job_logs';

const {Header, Content, Sider} = Layout;

export default function Index() {
    const menuItems = [
        {
            key: 'homePage',
            icon: <HomeOutlined />,
            label: "首页"
        }, {
            key: 'tasks',
            icon: <ScheduleOutlined />,
            label: "任务管理"
        }, {
            key: 'executors',
            icon: <SettingOutlined />,
            label: "执行器管理"
        }, {
            key: 'jobLogs',
            icon: <FileTextOutlined />,
            label: "调度日志"
        }
    ];
    
    const userMenuItems = [
        {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: "退出登录",
            onClick: () => {
                localStorage.removeItem("token");
                history.push("/login");
            }
        }
    ];

    const [menuIndex, setMenuIndex] = useState('homePage');
    const [collapsed, setCollapsed] = useState(false);
    
    const changeMenu = (e:any) => {
        setMenuIndex(e.key);
    };
    
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    return (
        <Layout className="app-main-layout" style={{ minHeight: '100vh' }}>
            <Header className="app-header" style={{ 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'space-between',
                padding: '0 24px'
            }}>
                <div className="logo" style={{ 
                    color: '#fff', 
                    fontSize: '18px', 
                    fontWeight: 'bold',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <ScheduleOutlined style={{ fontSize: '24px', marginRight: '8px' }} />
                    菜牛任务调度系统
                </div>
                <div>
                    <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
                        <Space style={{ color: '#fff', cursor: 'pointer' }}>
                            <Avatar icon={<UserOutlined />} />
                            <span>管理员</span>
                        </Space>
                    </Dropdown>
                </div>
            </Header>
            <Layout>
                <Sider 
                    width={200} 
                    collapsible 
                    collapsed={collapsed}
                    onCollapse={toggleCollapsed}
                    className="app-sider"
                    style={{ 
                        background: '#fff',
                        boxShadow: '2px 0 8px 0 rgba(29,35,41,.05)'
                    }}
                    trigger={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                >
                    <Menu
                        mode="inline"
                        selectedKeys={[menuIndex]}
                        style={{ height: '100%', borderRight: 0 }}
                        items={menuItems}
                        onClick={changeMenu}
                    />
                </Sider>
                <Content style={{ 
                    padding: '24px', 
                    margin: 0, 
                    minHeight: 'calc(100vh - 64px)',
                    background: '#f0f2f5'
                }}>
                    { menuIndex === 'homePage' ? <HomePage/> : null }
                    { menuIndex === 'tasks' ? <Tasks/> : null }
                    { menuIndex === 'executors' ? <Executors/> : null }
                    { menuIndex === 'jobLogs' ? <JobLogs/> : null }
                </Content>
            </Layout>
        </Layout>
    );
}
